<template>
  <main class="all-main">
    <div class="all-div">
      <p><span>修改用户</span><span @click="closeAllocationUsers">X</span></p>
      <ul>
        <li>当前用户：{{ props.haha.name }}</li>
        <li>当前角色：{{ props.haha.role }}</li>
        <li>
          分配新角色：<el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </li>
      </ul>

      <section>
        <el-button @click="closeAllocationUsers">取消</el-button>
        <el-button type="primary" @click="allocationUsersPersons"
          >确定</el-button
        >
      </section>
    </div>
  </main>
</template>

<script setup>
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref, onMounted, watchEffect } from "vue";
// 接收参数
const emit = defineEmits(["ccc"]);
// 关闭遮罩层
function closeAllocationUsers() {
  emit("ccc", false);
}
// 接收信息
let props = defineProps({
  haha: Object,
});
// 选的新角色
const value = ref("");
// 角色列表
let roleList = ref([]);
onMounted(() => {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.get("/api/roles", { headers }).then((res) => {
    roleList.value = res.data.data;
  });
});

// 确定
function allocationUsersPersons() {
  console.log(value.value, props.haha.id, VueCookies.get("token"));
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios
    .put(`/api/users/${props.haha.id}/role`, { rid: value.value }, { headers })
    .then((res) => {
      alert(res.data.meta.msg);
      if (res.data.meta.msg == "设置角色成功") {
        // 关闭遮罩层
        closeAllocationUsers();
      }
    });
}
</script>

<style scoped>
.all-main {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.all-div {
  width: 700px;
  height: 300px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
p {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0px 0px 40px;
}
ul {
  list-style: none;
  margin-top: 50px;
}
ul li {
  margin: 20px 0px;
}
section {
  display: flex;
  position: absolute;
  bottom: 70px;
  right: 80px;
}
</style>